<template>
  <div>
    <head-container></head-container>
    <div class="action_main">
      <h2>
        <router-link tag="span" to="/">首页</router-link>
        <span>> 我的订单</span>
      </h2>
      <section class="action_main_wraper">
        <div class="silder_wraper">
          <span @click="getOrderList()">全部订单</span>
          <span @click="getOrderList(0)">代付款</span>
          <span @click="getOrderList(1)">待发货</span>
          <span @click="getOrderList(2)">待收货</span>
          <span @click="getOrderList(3)">待评价</span>
        </div>
        <div class="action_wraper" 
            v-loading='isLoading'
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.5)">
            <nav>
              <span class="order_info_wraper">订单信息</span>
              <span class="num">数量</span>
              <span class="consignee">收货人</span>
              <span class="total_price">金额</span>
              <span class="status">状态</span>
            </nav>
            <section class="order_item" v-for="item in actionList" :key="item.oid">
              <header>
                <div class="order_timer">
                  <span>{{GLOBAL.timestampToTime(item.create_at)}}</span>
                  <span>订单号: {{ item.oid}}</span>
                  <span v-if="item.shipnumber">物流单号：{{item.shipnumber}}</span>
                </div>
                <div class="delate" @click="delateOrder(item.oid,item.status)">删除</div>
              </header>
              <div class="action_item_list">
                <section>
                  <div class="order_info_wraper" v-for="(i,index) in item.product" :key="index">
                    <div class="order_info clearfix">
                      <div class="fl"><img :src="i.image" :alt="i.a"></div>
                      <div class="fl item_info">
                        <div class="title">{{i.course?i.course:i.product}}</div>
                        <div class="info">
                          <div v-if="i.product"><span>{{i.sex}}</span><span>{{i.size}}</span><span>{{i.color}}</span></div>
                          <div v-else><span>{{i.city}}</span><span>{{i.system}}</span><span>{{i.date}}</span></div>
                        </div>
                        <div class="star">{{i.star?i.star+'星课程':''}}</div>
                      </div>
                    </div>
                    <span class="num">{{i.quantity}}</span>
                  </div>
                </section>
                <span class="consignee">{{item.shipto}}</span>
                <span class="total_price">￥{{item.total}}</span>
                <span class="status status_to" @click="changeStatus(item.oid,item.status,item.product)">{{status[item.status]||''}}</span>
              </div>
            </section>
            <div style="font-weight:bold;height:400px;line-height:400px;text-align:center;" v-if="!actionList.length&&!isLoading&&!errMsg">
              暂无数据
            </div>
            <div v-if="errMsg" style="font-weight:bold;height:400px;line-height:400px;text-align:center;">
              {{errMsg}}
            </div>
        </div>
      </section>
    </div>
    <el-dialog  class="pay_img"  title="请用微信扫描下方二维码支付"
                :before-close="handleClose"
                :visible.sync="dialogFormVisible1">
      <img :src="payImg" alt="">
      <div>二维码有效期两小时，请在有效期内完成付款</div>
    </el-dialog>
    <foot-container></foot-container>
  </div>
</template>
<script>
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
import goToLogin from '../components/goToLogin'
export default {
  name:'listAcion',
  components:{
    headContainer,
    footContainer,
    goToLogin
  },
  data() {
    return {
      errMsg:'',
      isLoading:true,
      payImg:'',
      dialogFormVisible1:false,
      actionList:[],//订单列表
      status:['去支付','待发货','确认收货','去评价','交易完成'],
      resGo:true,
      delated:false
    };
  },
  mounted(){
    this.getOrderList()
  },
  methods: {
    getOrderList(status){
      this.isLoading = true;
      // this.actionList = []
      this.GLOBAL.tokenRequest({
        method:"post",
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:"orders/show",
        data: {
          status
        }
      }).then(({data:data})=>{
        this.isLoading = false;
        if (data =="订单为空") {
          this.actionList = [];
          return;
        };
        this.actionList = data;
      }).catch((err)=>{
        this.isLoading = false
        this.errMsg = '数据加载失败'
      })
    },
    monitorPay(orderid){//建立轮询返回true付款成功
      this.GLOBAL.request({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'pays/res',
        data:{
          orderid
        }
      }).then(({data:data})=>{
        if (!data.status&&this.resGo) {//没付款
          this.monitorPay(orderid)
        }
        if (data.status==1) {//成功
          this.dialogFormVisible1 = false;
          this.$message({
            type:'success',
            message:data.message
          })
          this.getOrderList();
        }
        if (data.status==2) {//超时
          this.dialogFormVisible1 = false;
          this.$message({
            type:'error',
            message:data.message
          })
        }
      })
    },
    changeStatus(oid,status){//改变当前所属状态
      switch (status) {
        case 0://0 去支付
          this.GLOBAL.tokenRequest({
            method:'post',
            baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
            url:'pays/wx',//获取二维码
            data:{
              orderid:oid//订单号
            }
          }).then(({data:data})=>{
            this.payImg = data;
            this.dialogFormVisible1 = true;
            this.monitorPay(oid)
          })
          break;
        case 1://1 提醒发货
          //无事发生
          break;
        case 2://2 确认收货
          this.GLOBAL.tokenRequest({
            method:'post',
            baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
            url:'orders/confirm',//确认收货
            data:{
              orderid:oid//订单号
            }
          }).then(({data:data})=>{
            if(data){
              this.$message({
                type:'success',
                message:'确认收货成功'
              })
              setTimeout(()=>this.getOrderList(3),500)
            }
          })
          break;
        case 3://去评价
          this.$router.push({name:'Comment',params:{oid}})
        case 4://已完成
          //无事发生
        default:
          break;
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭吗？')
        .then(_ => {
          this.resGo = false;
          done();
        })
        .catch(_ => {});
    },
    delateOrder(orderid,status){//删除当前订单
      if(status == 0 || status == 3 || status == 4){//确认为待付款或待评价已完成
        if (this.delated)return;
        this.delated = true;
        this.GLOBAL.tokenRequest({
          method:"post",
          baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
          url:"orders/del",
          data: {
            orderid,
            status
          }
        }).then(({data:data})=>{
          this.delated = false;
          if (data) {
            this.$message({
              message:'刪除成功',
              type:'success'
            })
            this.getOrderList()
          }else{
            this.$message({
              message:'刪除失败',
              type:'error'
            })
          }
        }).catch((err)=>{
          this.delated = false;
        })
      }else{
        this.$message({
          message:'该状态订单无法删除',
          type:'error'
        })
      }
    }
  }
}
</script>
<style scoped>
h2 span{
  font: 14px/70px "微软雅黑";
  color:#999;
  cursor: pointer;
}
.action_main_wraper{
  display: flex;
  justify-content: space-between;
}
.action_main{
  width: 1200px;
  margin:0 auto;
  padding-top:50px;
  min-height:680px;
  font-family: "微软雅黑";
  box-sizing: border-box;
}
.silder_wraper{
  width:100px;
  height:530px;
  background-color: #78bbff;
  color:#f8fbff;
}
.silder_wraper span{
  display: block;
  cursor: pointer;
  font: 14px/40px "微软雅黑";
  text-align: center;
  margin:20px 0;
}
.action_wraper{
  width:1060px;
  min-height:530px;
}
.action_wraper nav{
  width:1060px;
  display: flex;
  text-align: center;
  font:14px/22px "微软雅黑";
  background-color: #f5f5f5;
  justify-content: space-between;
}
.order_info_wraper,.order_info{
  width:620px;
}
.order_info .item_info{
  padding: 15px;
  font-size:14px;
  box-sizing:border-box;
  color:#9a9a9a
}
.order_info .item_info div{
  line-height:24px;
}
.order_info .item_info span{
  padding-right:10px;
}
.item_info .title{
  font:bold 16px/26px "微软雅黑";
  color:#2c3e50;
}
.num, .total_price, .status, .consignee{
  width:100px;
}
.order_item{
  border:1px solid #dbdbdb;
  width:1060px;
  box-sizing: border-box;
  margin-top: 20px; 
}
.order_item header{
  font:14px/22px "微软雅黑";
  background-color: #f5f5f5;
  display: flex;
  padding:0 35px;
  justify-content: space-between;
}
.order_timer span{
  margin-right: 10px;
}
.delate{
  color:red;
  cursor: pointer;
}
.action_item_list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:10px 0;
  text-align: center;
}
.action_item_list img{
  width:120px;
  height:100px;
}
.action_item_list .order_info_wraper{
  width:720px;
  padding:5px 0 5px 5px;
  border-right: 1px solid #f5f5f5;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f5f5;
  text-align: left;
  align-items: center;
}
.action_item_list .order_info_wraper .num{
  text-align: center;
}
.status_to{
  color:red;
  cursor: pointer;
}
/* 付款 */
.pay_img{
  text-align: center;
}
.pay_img img{
  width:340px;
  height:340px;
}
</style>

